<template>
  <div class="container">
    <img-preview :data="showImg" :disabled="disabled" :hidePlus="true" @change-value="handleDelete" />
    <el-button type="primary" @click="showESign" v-if="!disabled">签字</el-button>
    <drag-dialog v-model="showDialog" title="签字" :width="`${width}px`" append-to-body>
      <div class="esign-content">
        <esign
          ref="esign"
          class="mySign"
          :width="width"
          :height="height"
          :isCrop="isCrop"
          :lineWidth="lineWidth"
          :lineColor="lineColor"
        />
      </div>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="handleGenerate" type="primary">生成签字图片</el-button>
          <el-button @click="handleReset">清空画板</el-button>
          <el-button @click="showDialog = false">取消</el-button>
        </div>
      </template>
    </drag-dialog>
  </div>
</template>

<script>
import esign from '@/components/Zmids/esign/esign.vue'
import imgPreview from '@/components/Zmids/imgPreview/imgPreview.vue'
import { customUpload } from '../../api/model/apply'
import { getCustomUploadTrans } from '../../utils/common-methods'

export default {
  name: 'AnvilEsign',
  components: { esign, imgPreview },
  // model: {
  //   prop: "data",
  //   event: "changeValue",
  // },
  props: {
    modelValue: {
      type: String,
      default: ''
    },
    disabled: {
      type: Boolean,
      default: false
    },
    width: {
      type: Number,
      default: 0
    },
    height: {
      type: Number,
      default: 0
    },
    lineWidth: {
      type: Number,
      default: 0
    },
    lineColor: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      showDialog: false,
      resultImg: '',
      isCrop: false, // 是否裁剪
      showImg: ''
    }
  },
  watch: {
    modelValue: {
      handler(newVal) {
        this.showImg = newVal
      },
      immediate: true
    },
    showImg: {
      handler(newVal) {
        this.$emit('update:modelValue', newVal)
      }
    }
  },
  methods: {
    showESign() {
      this.showDialog = true
    },
    handleGenerate() {
      this.$refs.esign
        .generate() // 使用生成器调用把签字的图片转换成为base64图片格式
        .then((res) => {
          this.resultImg = res
        })
        .catch((err) => {
          // 画布没有签字时会执行这里提示一下
          this.$message({
            type: 'warning',
            message: '请签名后再生成签字图片'
          })
        })
      setTimeout(() => {
        if (this.resultImg) {
          const file = this.base64ToFile(this.resultImg, 'myFile')
          console.log('file', file)
          customUpload(file).then((response) => {
            const { data } = response
            const imgObj = getCustomUploadTrans(data)
            this.showImg = imgObj.url
          })
        }
      }, 200)

      this.showDialog = false
      this.handleReset()
    },
    handleReset() {
      this.$refs.esign.reset()
    },
    handleDelete() {
      this.showImg = ''
      // this.$emit("changeValue", this.showImg);
    },
    // base64转file类型
    base64ToFile(origin, fileName) {
      let arr = origin.split(',')
      let type = arr[0].match(/:(.*?);/)[1]
      let bstr = atob(arr[1])
      let n = bstr.length
      let u8Arr = new Uint8Array(n)

      while (n--) {
        u8Arr[n] = bstr.charCodeAt(n)
      }

      return new File([u8Arr], fileName, { type })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  align-items: center;
  gap: 40px;
  // justify-content: center;
}
.esign-content {
  border: 1px solid #cdcdcd;
}
</style>
